<html>
    <head>
        <title>样式 和 脚本 依赖</title>
    </head>
    <body>
        <script>
             /*
                        四、样式 和 脚本依赖   Style and Script Dependencies

                                       当您的小部件具有脚本和样式文件时会遇到一些挑战：
                                       
                                               ①、任何使用小部件的页面还应该将其脚本和样式文件包含到页面内。
                                               
                                               ②、该页面还应该关心小部件的依赖库/文件

                                        当您将资源与小部件正确关联时，ABP可以解决这些问题。
                                        
                                        您在使用小部件时不用关心小部件的依赖关系。

                                        1、将依赖定义为简单文件路径 Defining as Simple File Paths

                                                    下面的示例小部件添加了样式和脚本文件：

                                                            using Microsoft.AspNetCore.Mvc;
                                                            using Volo.Abp.AspNetCore.Mvc;
                                                            using Volo.Abp.AspNetCore.Mvc.UI.Widgets;

                                                            namespace DashboardDemo.Web.Pages.Components.MySimpleWidget
                                                            {
                                                                [Widget(
                                                                    StyleFiles = new[] { "/Pages/Components/MySimpleWidget/Default.css" },
                                                                    ScriptFiles = new[] { "/Pages/Components/MySimpleWidget/Default.js" }
                                                                    )]  // 将依赖定义为简单的文件路径
                                                                public class MySimpleWidgetViewComponent : AbpViewComponent
                                                                {
                                                                    public IViewComponentResult Invoke()
                                                                    {
                                                                        return View();
                                                                    }
                                                                }
                                                            }

                                                    ABP会考虑这些依赖关系，并在您使用小部件时正确添加到视图/页面。
                                                    
                                                    样式/脚本文件可以是物理或虚拟。它完全集成到虚拟文件系统。


                                        2、将依赖定义为捆绑包贡献者   Defining Bundle Contributors 

                                                    页面中使用的小部件的所有资源都作为bundle添加（如果您不进行其他配置，则在生产环境中打包和压缩）。

                                                    除了添加一个简单的文件，您还可以充分利用捆绑贡献者的力量。

                                                    下面的示例代码与上面的代码相同，但定义和使用捆绑包贡献者：

                                                                using System.Collections.Generic;
                                                                using Microsoft.AspNetCore.Mvc;
                                                                using Volo.Abp.AspNetCore.Mvc;
                                                                using Volo.Abp.AspNetCore.Mvc.UI.Bundling;
                                                                using Volo.Abp.AspNetCore.Mvc.UI.Widgets;

                                                                namespace DashboardDemo.Web.Pages.Components.MySimpleWidget
                                                                {
                                                                    [Widget(
                                                                        StyleTypes = new []{ typeof(MySimpleWidgetStyleBundleContributor) },
                                                                        ScriptTypes = new[]{ typeof(MySimpleWidgetScriptBundleContributor) }
                                                                        )] // 依赖声明为捆绑包贡献者
                                                                    public class MySimpleWidgetViewComponent : AbpViewComponent
                                                                    {
                                                                        public IViewComponentResult Invoke()
                                                                        {
                                                                            return View();
                                                                        }
                                                                    }

                                                                    public class MySimpleWidgetStyleBundleContributor : BundleContributor
                                                                    {
                                                                        public override void ConfigureBundle(BundleConfigurationContext context)
                                                                        {
                                                                            context.Files
                                                                            .AddIfNotContains("/Pages/Components/MySimpleWidget/Default.css");
                                                                        }
                                                                    }

                                                                    public class MySimpleWidgetScriptBundleContributor : BundleContributor
                                                                    {
                                                                        public override void ConfigureBundle(BundleConfigurationContext context)
                                                                        {
                                                                            context.Files
                                                                            .AddIfNotContains("/Pages/Components/MySimpleWidget/Default.js");
                                                                        }
                                                                    }
                                                                }
                                                    捆绑贡献系统非常强大。

                                                    如果你的小部件使用JavaScript库来呈现图表，那么你可以将其声明为依赖项，因此如果之前没有添加JavaScript库，它会自动添加到页面中。

                                                    这样，使用你的小部件的页面就不会关心依赖项。
                   */
        </script>
    </body>
</html>